<template>
  <div class="goods-list">
    <!-- 侧边导航 -->
    <div class="list-nav">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          :title="item.goods_type_name"
          v-for="item in editableTabs"
          :key="item.goods_type_id"
        ></van-sidebar-item>
      </van-sidebar>
    </div>
    <div class="list">
      <van-notice-bar
        left-icon="volume-o"
        text="买猪肉送女朋友！买猪肉送女朋友！买猪肉送女朋友！买猪肉送女朋友！"
      />
      <div v-if="!showsearch">
        <goodscontent
          v-show="activeKey === i"
          v-for="(item,i) in editableTabs"
          :key="i"
          @closesearch="$emit('closesearch')"
          :shopleiid="item.goods_type_id"

        ></goodscontent>
      </div>
    </div>
    <!-- 搜索弹窗 -->
    <van-popup v-model="showsearch" :duration="0" position="bottom" :style="{ height: '100%' }">
      <goodssearch @closesearch="$emit('closesearch')"></goodssearch>
    </van-popup>
  </div>

</template>

<script>
import goodscontent from '@/components/goods-list/goodscontent'
import { getgoodslei } from '@/api/goods'
import goodssearch from '@/components/goods-list/goodssearch'

export default {
  data () {
    return {
      editableTabs: [],
      activeKey: 0,
      deley: false
      // gouwuche: []
    }
  },
  props: {
    showsearch: {
      type: Boolean,
      required: true
    }
  },
  created () {
    this.goodslei()
  },
  mounted () {

  },
  components: {
    goodscontent,
    goodssearch
  },

  methods: {
    async goodslei() {
      const res = await getgoodslei()
      this.editableTabs.unshift(...res.data.data.goodsTypeList)
      this.deley = true
    }

  }
}
</script>

<style scoped lang="less">
.goods-list {
  display: flex;
  .list-nav {
    flex: 1;
    height: 77vh;
    overflow-y: auto;
    overflow-x:hidden;
  }
  .list {
    flex: 4;
  }
}
</style>
